<template>
  <div class="main">
    <!-- 表格 -->
    <div class="flex-table-box">
      <el-table v-loading="loading"
                ref="tagListRef"
                stripe
                element-loading-text="加载中"
                element-loading-spinner="el-icon-loading"
                height="100%"
                :data="tableData"
                tooltip-effect="dark"
                align="center"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55"
                         fixed="left"></el-table-column>
        <el-table-column label="状态"
                         prop="online"
                         width="100"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <i class="el-icon el-icon-message-solid"
               :style="{ color: scope.row.online ? 'green' : 'red',fontSize: '14px',marginRight: '5px'}"></i>
            <span>{{ scope.row.online ? '在线':'离线'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="标签号"
                         prop="number"
                         min-width="120"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="标签名称"
                         prop="name"
                         min-width="120"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="关联类型"
                         prop="employType"
                         min-width="120"
                         show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.type === 0 ? '资产' : '人员'}}</template>
        </el-table-column>
        <el-table-column label="关联名称"
                         prop="employName"
                         min-width="120"
                         show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

    <div class="g-dialog-footer">
      <el-button type="primary"
                 size="mini"
                 icon="el-icon-circle-check"
                 @click="handleSave">保存</el-button>
      <el-button type="primary"
                 size="mini"
                 icon="el-icon-circle-close"
                 @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getTagList } from '@/api/tag'
export default {
  props: {
    userList: Array
  },
  data () {
    return {
      selectOptions: [],
      tableData: [],
      loading: true
    }
  },
  created () {
    getTagList({ pageNo: 1, pageSize: 9999 })
      .then((res) => {
        this.loading = false
        if (res.status != 200) return
        this.tableData = res.obj.records.map(el => {
          let relAvailabilityName = ''
          let relAvailabilityColor = ''
          if (el.employEnabled) {
            relAvailabilityColor = 'green'
            relAvailabilityName = '可用'
          } else {
            relAvailabilityColor = 'red'
            relAvailabilityName = '不可用'
          }
          return { ...el, relAvailabilityName, relAvailabilityColor }
        })
        this.$nextTick(() => {
          this.userList.forEach(el => {
            console.log(this.tableData.find(item => item.id === el.id));
            this.$refs.tagListRef.toggleRowSelection(this.tableData.find(item => item.id === el.id), true)
          })
        })
      })
      .catch((error) => {
        this.loading = false
      })
  },
  methods: {
    handleSave () {
      console.log(this.selectOptions);
      this.$emit('save', this.selectOptions)
    },
    handleCancel () {
      this.$emit('close')
    },
    handleSelectionChange (options) {
      this.selectOptions = options
    }
  }
}
</script>
<style scoped lang="scss">
.main {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0 10px;

    .el-select {
        width: 200px;
    }
    .flex-table-box {
        flex-grow: 1;
    }
    .page-block {
        height: 50px;
    }
}
</style>
